<template>
	<div :class="[showSideBar?'sidebar':'sidebarShow']">
		<ul class="nav nav-sidebar" >			
			<li class="nav-parent" v-for="(row, index) in parentList" v-if="row.parentCode=='menu_0000'">
				<router-link v-bind:to="row.resourcesHref" class="nav-parent-title"  v-if="findSubNode(row.resourcesCode)">
					<i v-bind:class="row.resourcesIcon" ></i> {{row.resourcesName}}
					<i class="fa fa-angle-down iconRight"></i>
				</router-link>
				<li class="nav-parent" v-for="(row, index) in parentList" v-if="!findSubNode(row.resourcesCode)">
					<a class="nav-parent-title">
						<i v-bind:class="row.resourcesIcon"></i>
						{{row.resourcesName}}
						<i class="fa fa-angle-down iconRight"></i>
					</a>
					<ul class="nav nav-children" v-for="(node,index) in subNodeList">
						<li v-if="node.parentCode==row.resourcesCode">
							<router-link v-bind:to="node.resourcesHref"><i class="fa fa-circle iconLeft"></i>{{node.resourcesName}}</router-link>
						</li>
					</ul>
				</li>
			</li>
		</ul>
		<div :class="[showSideBar?'showBtn':'hiddenBtn']" @click="hiddenSideBar">
			<div :class="[showSideBar?'showTriangle':'hiddenTriangle']"></div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{showSideBar:[Boolean]},
		data() {
			return {
				menuInfo: {
					resourcesType: "1",
					resourcesOrigin: "1",
					resourcesLevel: "0"
				},
			}
		},
		computed:{
			parentList(){
				return this.$store.getters.parentList
			},
			subNodeList(){
				return this.$store.getters.subNodeList
			}
		},
		created(){
			if(this.$store.getters.parentList.length===0){			
				this.$store.dispatch('getMenuList')
			}
		},
		methods:{
			hiddenSideBar(){	
				this.$emit('changeShow')
			},
			// initMenu:function(){
			// 	var _self = this;
			// 	var url = _self.utilHelper.apiUrl + "/api/getMenu";
			// 	var body = {};
			// 	var params = _self.menuInfo;
			// 	body.params = params;
			// 	_self.$http.post(url, body).then((response)=>{
			// 		if(response.body.resData!=null){
			// 			_self.parentList = response.body.resData.resourcesMap.parent;
			// 			_self.subNodeList = response.body.resData.resourcesMap.subNode;
            //             var firstHref = "";
            //             if(_self.parentList){
            //                 for(var ii=0; ii<_self.parentList.length; ii++){
            //                     var menu = _self.parentList[ii];
            //                     var resourcesHref = menu.resourcesHref;
            //                     if("#" != resourcesHref){
            //                         firstHref = resourcesHref;
            //                         break;
            //                     }
            //                 }
            //             }
            //             if(!firstHref && _self.subNodeList){
            //                 for(var ii=0; ii<_self.subNodeList.length; ii++){
            //                     var menu = _self.subNodeList[ii];
            //                     var resourcesHref = menu.resourcesHref;
            //                     if("#" != resourcesHref){
            //                         firstHref = resourcesHref;
            //                         break;
            //                     }
            //                 }
			// 			}
			// 			this.$store.commit('setFirstMenu',firstHref)
			// 			console.log(firstHref,9090);
			// 		}else {
			// 			window.localStorage.setItem("1_isLogin", false);
			// 			_self.$router.replace({
			// 				path: '/login'
			// 			})
			// 		}
			// 	});
			// },
			findSubNode:function(resourcesCode_p){
				var _self = this;
				var count = 0;
				var subNodeList = this.subNodeList;
				for(var i=0;i<subNodeList.length;i++){
					if(subNodeList[i].parentCode==resourcesCode_p){
						count++;
					}
				}
				if(count<=0){
					return true;
				}else{
					return false;
				}
			}
		}
	}
</script>
<style scoped>
.sidebarShow{
	position: fixed;top: 51px;bottom: 0;left: 0;z-index: 1000;display: block;width: 0px;padding: 0px;overflow-x: hidden;overflow-y: auto;background-color: #f2f2f2;border-right: 1px solid #dbdee0
}
.showBtn{
  position: fixed;
  top: 38%;
  transform: translateX(-50%);
  left:207px;
  width:15px;
  height: 200px;
  border: 1px solid #C0C0C0;
  background-color: #f0f0f0;
}
.hiddenBtn{
  position: fixed;
  top: 38%;
  transform: translateX(-50%);
  left:0px;
  width:30px;
  height: 200px;
  border: 1px solid #C0C0C0;
  background-color: #f0f0f0;
}
.hiddenTriangle {
	margin-top:86px;
    width: 0;
	height: 0;
    border-top: 14px solid transparent ;
    border-left: 28px solid #000;
	border-bottom: 14px solid transparent;
}
.showTriangle {
	margin-top: 90px;
    width: 0;
	height: 0;
    border-top: 7px solid transparent ;
    border-right: 14px solid #000;
	border-bottom: 7px solid transparent;
}
    
</style>